<template>
  <div class="mapbox" ref="mapbox"></div>
</template>

<script>
import { themeData } from "@/utils/publicStyle.js";
export default {
  props: {
    value: String, // chartID 可参考store/mapdata.js 中mapData对应的省市id
    tipTimer: Number,
    /**
     * mapConfig: {
     *    option:{} 可传入  echarts配置，传入后覆盖默认配置,
     *    data: [] 地图数据
     *    name: 数据系列名称
     * }
     */
    mapConfig: Object,
  },
  data() {
    return {
      pause: false, // 是否暂停轮播
      tipTimerTask: 0, // tooltip任务线程
      seriesData: {
        dataCount: 0, //数据条数
        dataIndex: 0, // 数据索引
      },
      theme: themeData[this.$store.state.theme],
      mapChart: null,
      lock: false, // 避免重复请求地图json文件
    };
  },
  computed: {
    mapOption() {
      let option = {
        tooltip: {
          show: true,
        },
        geo: {
          map: this.value,
          roam: true, // 缩放 'scale'
          zoom: 1,
          z: 0,
          layoutCenter: ["50%", "50%"],
          // selectedMode: 'single', // 单选
          // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          //layoutSize: 700,
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: this.getSize(14),
                fontFamily: "Arial",
                color: "#000",
                // textBorderColor: this.theme.color01,
                textBorderWidth: 1,
              },
            },
            emphasis: {
              textStyle: {
                color: this.theme.bgColor,
              },
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#c4d9f4",
              borderColor: this.theme.color07,
              borderWidth: 1,
            },
            emphasis: {
              areaColor: this.theme.color06,
              borderWidth: 0,
            },
          },
        },
        visualMap: {
          min: 0,
          max: 113,
          text: ["万元", ""],
          show: false,
          textStyle: {
            color: this.theme.fColor2,
          },
          itemHeight: this.getSize(80),
          realtime: false,
          calculable: true,
          inRange: {
            color: ["#c4d9f4", "#399be0", "#1c496d"],
          },
        },
        series: [
          {
            name: this.mapConfig.name || "数据地图",
            type: "map",
            mapType: this.value,
            geoIndex: 0,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: this.theme.bgColor,
                  textBorderColor: this.theme.color11,
                  textBorderWidth: 1,
                },
              },
              emphasis: {
                textStyle: {
                  color: this.theme.bgColor,
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: this.theme.color11,
                borderColor: this.theme.color11,
                borderWidth: 1,
              },
              emphasis: {
                areaColor: this.theme.color13,
                borderWidth: 0,
              },
            },
            roam: false,
            //   放大我们的地图
            zoom: 1,
            layoutCenter: ["50%", "50%"],
            // 如果宽高比大于 1 则宽度为 1100，如果小于 1 则高度为 1100，保证了不超过 1100x1100 的区域
            layoutSize: 800,
            zlevel: 2,
            data: this.mapConfig.data || [],
          },
        ],
      };

      if (this.mapConfig.option) {
        option = Object.assign(option, this.mapConfig.option);
      }
      return option;
    },
  },
  watch: {
    mapOption() {
      if (this.echarts.getMap(this.value)) {
        this.createMap();
      } else {
        this.registerMap(this.value);
      }
    },
  },
  mounted() {
    this.registerMap(this.value);
  },
  methods: {
    // 注册地图数据
    registerMap(chartID) {
      let chartObj = this.$store.getters.getMapData(chartID);
      if (!this.lock && chartObj.geoPath) {
        this.lock = true;
        let host =
          window.location.origin +
          window.location.pathname.replace("index.html", ""); // 获取服务器域名
        this.$axios.get(`${host}mapjson/${chartObj.geoPath}`).then((res) => {
          this.echarts.registerMap(chartID, res.data);
          this.createMap();
          this.lock = false;
        });
        // 无论请求成功与否，5s后自动解锁
        setTimeout(() => {
          this.lock = false;
        }, 5 * 1000);
      }
    },
    createMap() {
      if (this.mapChart) {
        this.mapChart.clear();
      } else {
        this.mapChart = this.echarts.init(this.$refs.mapbox);
        window.addEventListener("resize", this.resizeChart);
      }
      this.mapChart.setOption(this.mapOption);
      this.$emit("getEchart", this.mapChart);

      this.initAnimate();
      this.setToolTipTimer();
    },
    // 初始化动画数据
    initAnimate() {
      this.bindEvent();
      try {
        this.seriesData.dataCount = this.mapConfig.option.series[0].data.length;
      } catch (e) {
        this.seriesData.dataCount = 0;
      }
      this.seriesData.dataIndex = 0;
    },
    resizeChart() {
      if (this.mapChart) {
        this.mapChart.resize();
      }
    },
    // 绑定图表事件
    bindEvent() {
      let _this = this;
      this.mapChart.on("mouseover", function (e) {
        //当检测到鼠标悬停事件，暂停轮播
        _this.pause = true;
      });

      //检测鼠标移出后显示之前默认高亮的那块
      this.mapChart.on("mouseout", function (e) {
        //当检测到鼠标离开事件，继续轮播
        _this.pause = false;
      });
    },
    // 暂停轮播
    pauseShowTip() {
      this.pause = true;
    },
    // 继续轮播
    playShowTip() {
      this.pause = false;
    },
    // 设置tooltip的轮播显示
    setToolTipTimer() {
      if (this.tipTimer) {
        clearInterval(this.tipTimerTask);

        this.dispatchShowTip(0);

        this.tipTimerTask = setInterval(() => {
          if (!this.pause) {
            this.setTimerIndex();
            this.dispatchShowTip(this.seriesData.dataIndex);
          }
        }, this.tipTimer);
      }
    },
    // 设置相关索引
    setTimerIndex() {
      this.seriesData.dataIndex++;
      if (this.seriesData.dataIndex >= this.seriesData.dataCount) {
        // 数据索引大于数据总长度 data重置为0
        this.seriesData.dataIndex = 0;
      }
    },
    // 触发显示提示
    dispatchShowTip(dataIndex) {
      // console.log(dataIndex);
      this.mapChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
        dataIndex: dataIndex,
      });
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  },
};
</script>

<style lang="scss" scoped>
.mapbox {
  width: 100%;
  height: 100%;
}
</style>
